<template>
    <div class="adminpage">
        <div class="top">
            <div class="topbar">
                <div class="topbar-l" :class="{'topbar-l-hover': isreport}" style="margin-right: 260px;" @click="doreport">上报数据</div>
                <img src="../images/viruswatcher.png" alt="">
                <div class="topbar-l" :class="{'topbar-l-hover': ismodule}" style="margin-left: 260px;" @click="domodule">调配物资</div>
            </div>
        </div>
        <div class="content">
            <!-- 这是时钟组件 -->
            <div class="clock" :class="{onclock: ismodule}">
                <svg height="200" width="200" viewBox="0 0 1000 1000">
                    <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26" />
                    <path d="M500,500,500,236" id="hour" />
                    <path d="M500,500,500,120" id="min" />
                    <path d="M500,500,500,90" id="sec" />
                </svg>
            </div>

            <!-- 上报数据 -->
            <div class="report" :class="{onreport: isreport}">
                <span>疫情人员情况</span><br />
                <hr>
                <button @click="reportAllMaterial('防疫人员')">更新</button>&nbsp;&nbsp;防疫人员剩余：
                <span style="color: red;">{{preventionWorkersAll}}位</span><br /><br />

                <button @click="reportIsolatedPersonnel(SchoolA.schoolName)">更新</button>&nbsp;&nbsp;浙江传媒学院
                <span style="color: red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                隔离{{SchoolA.isolatedPersonnel}}人</span><br />

                <button @click="reportIsolatedPersonnel(SchoolB.schoolName)">更新</button>&nbsp;&nbsp;杭州职业技术学院
                <span style="color: red;">&nbsp;&nbsp;
                隔离{{SchoolB.isolatedPersonnel}}人</span><br />

                <button @click="reportIsolatedPersonnel(SchoolC.schoolName)">更新</button>&nbsp;&nbsp;杭州电子科技大学
                <span style="color: red;">&nbsp;&nbsp;
                隔离{{SchoolC.isolatedPersonnel}}人</span><br />

                <button @click="reportIsolatedPersonnel(SchoolD.schoolName)">更新</button>&nbsp;&nbsp;浙江理工大学
                <span style="color: red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                隔离{{SchoolD.isolatedPersonnel}}人</span><br /><br /><br />

                抗疫物资情况<br /><hr>
                <button @click="reportAllMaterial('口罩')">更新</button>&nbsp;&nbsp;口罩剩余：{{maskAll}}件<br />
                <button @click="reportAllMaterial('消毒水')">更新</button>&nbsp;&nbsp;消毒液剩余：{{disinfectantAll}}件<br />
                <button @click="reportAllMaterial('防护服')">更新</button>&nbsp;&nbsp;防护服剩余：{{suitAll}}件
            </div>

            <!-- 防疫人员分配 -->
            <div class="people" :class="{onpeople: ismodule}">
                防疫人员剩余：<span>{{preventionWorkersAll}}位</span><br /><br />
                分配情况<br />
                浙江传媒学院：{{SchoolA.preventionWorkers}}位<br />
                <button @click="reportMaterial(SchoolA.schoolName,'防疫人员')">调整</button><br />
                杭州职业技术学院：{{SchoolB.preventionWorkers}}位<br />
                <button @click="reportMaterial(SchoolB.schoolName,'防疫人员')">调整</button><br />
                杭州电子科技大学：{{SchoolC.preventionWorkers}}位<br />
                <button @click="reportMaterial(SchoolC.schoolName,'防疫人员')">调整</button><br />
                浙江理工大学：{{SchoolD.preventionWorkers}}位<br />
                <button @click="reportMaterial(SchoolD.schoolName,'防疫人员')">调整</button><br />
            </div>

            <!-- 抗疫物资分配 -->
            <div class="materials" :class="{onmaterials: ismodule}">
                抗疫物资剩余：<br />
                口罩：<span>{{maskAll}}件</span><br />
                消毒水：<span>{{disinfectantAll}}件</span><br />
                防护服：<span>{{suitAll}}件</span><br /><br />

                分配情况<br />
                浙江传媒学院<br />
                    口罩：{{SchoolA.mask}}件<button @click="reportMaterial(SchoolA.schoolName,'口罩')">调整</button><br /> <!-- 口罩低于50件，预警！！！ -->
                    消毒水：{{SchoolA.disinfectant}}件<button @click="reportMaterial(SchoolA.schoolName,'消毒水')">调整</button><br /> <!-- 消毒水低于20件，预警！！！ -->
                    防护服：{{SchoolA.suit}}件<button @click="reportMaterial(SchoolA.schoolName,'防护服')">调整</button><br /> <!-- 防护服低于5件，预警！！！ -->
                杭州职业技术学院<br />
                    口罩：{{SchoolB.mask}}件<button @click="reportMaterial(SchoolB.schoolName,'口罩')">调整</button><br />
                    消毒水：{{SchoolB.disinfectant}}件<button @click="reportMaterial(SchoolB.schoolName,'消毒水')">调整</button><br />
                    防护服：{{SchoolB.suit}}件<button @click="reportMaterial(SchoolB.schoolName,'防护服')">调整</button><br />
                杭州电子科技大学<br />
                    口罩：{{SchoolC.mask}}件<button @click="reportMaterial(SchoolC.schoolName,'口罩')">调整</button><br />
                    消毒水：{{SchoolC.disinfectant}}件<button @click="reportMaterial(SchoolC.schoolName,'消毒水')">调整</button><br />
                    防护服：{{SchoolC.suit}}件<button @click="reportMaterial(SchoolC.schoolName,'防护服')">调整</button><br />
                浙江理工大学<br />
                    口罩：{{SchoolD.mask}}件<button @click="reportMaterial(SchoolD.schoolName,'口罩')">调整</button><br />
                    消毒水：{{SchoolD.disinfectant}}件<button @click="reportMaterial(SchoolD.schoolName,'消毒水')">调整</button><br />
                    防护服：{{SchoolD.suit}}件<button @click="reportMaterial(SchoolD.schoolName,'防护服')">调整</button><br />
            </div>

            <!-- 主内容区域 -->
            <div class="main">
                <div class="school-01" :class="{onschool01: ismessage||ismessage01}">
                    <div class="school-text">
                        <span style="color: red;">隔离人数：{{SchoolA.isolatedPersonnel}}人</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        周边安全等级：<div :class="changeAroundLevelImg(this.SchoolA.aroundLevel)"></div><hr>
                        防疫人员剩余：{{SchoolA.preventionWorkers}}人<br />
                        口罩：{{SchoolA.mask}}件<br />
                        消毒水：{{SchoolA.disinfectant}}件<br />
                        防护服：{{SchoolA.suit}}件<br />
                        日志：{{SchoolA.log}}
                    </div>
                    <img class="bg-img" src="../images/bg2.png" alt="">
                </div>
                <img class="palce-img" :src="changeLevelImg(this.SchoolA.selfLevel)" alt=""
                @mouseover="ismessage01 = true"
                @mouseleave="ismessage01 = false"
                style="position: absolute;top: 230px;left: 314px;">
                <div class="school-02" :class="{onschool02: ismessage||ismessage02}">
                    <div class="school-text">
                        <span style="color: red;">隔离人数：{{SchoolB.isolatedPersonnel}}人</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        周边安全等级：<div :class="changeAroundLevelImg(this.SchoolB.aroundLevel)"></div><hr>
                        防疫人员剩余：{{SchoolB.preventionWorkers}}人<br />
                        口罩：{{SchoolB.mask}}件<br />
                        消毒水：{{SchoolB.disinfectant}}件<br />
                        防护服：{{SchoolB.suit}}件<br />
                        日志：{{SchoolB.log}}
                    </div>
                    <img class="bg-img" src="../images/bg3.png" alt="">
                </div>
                <img class="palce-img" :src="changeLevelImg(this.SchoolB.selfLevel)" alt=""
                @mouseover="ismessage02 = true"
                @mouseleave="ismessage02 = false"
                style="position: absolute;top: 216px;left: 926px;">
                <div class="school-03" :class="{onschool03: ismessage||ismessage03}">
                    <div class="school-text">
                        <span style="color: red;">隔离人数：{{SchoolC.isolatedPersonnel}}人</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        周边安全等级：<div :class="changeAroundLevelImg(this.SchoolC.aroundLevel)"></div><hr>
                        防疫人员剩余：{{SchoolC.preventionWorkers}}人<br />
                        口罩：{{SchoolC.mask}}件<br />
                        消毒水：{{SchoolC.disinfectant}}件<br />
                        防护服：{{SchoolC.suit}}件<br />
                        日志：{{SchoolC.log}}
                    </div>
                    <img class="bg-img" src="../images/bg4.png" alt="">
                </div>
                <img class="palce-img" :src="changeLevelImg(this.SchoolC.selfLevel)" alt=""
                @mouseover="ismessage03 = true"
                @mouseleave="ismessage03 = false"
                style="position: absolute;top: 398px;left: 380px;">
                <div class="school-04" :class="{onschool04: ismessage||ismessage04}">
                    <div class="school-text">
                        <span style="color: red;">隔离人数：{{SchoolD.isolatedPersonnel}}人</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        周边安全等级：<div :class="changeAroundLevelImg(this.SchoolD.aroundLevel)"></div><hr>
                        防疫人员剩余：{{SchoolD.preventionWorkers}}人<br />
                        口罩：{{SchoolD.mask}}件<br />
                        消毒水：{{SchoolD.disinfectant}}件<br />
                        防护服：{{SchoolD.suit}}件<br />
                        日志：{{SchoolD.log}}
                    </div>
                    <img class="bg-img" src="../images/bg5.png" alt="">
                </div>
                <img class="palce-img" :src="changeLevelImg(this.SchoolD.selfLevel)" alt=""
                @mouseover="ismessage04 = true"
                @mouseleave="ismessage04 = false"
                style="width: 40px;position: absolute;top: 402px;left: 1006px;">
                <img class="icon-img" :src="iconimg ? this.linkerImg[0].src : this.linkerImg[1].src" alt="" @click="domessage">
                <img class="main-bg" src="../images/bg.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import SQL from "../js/sql.js"
export default {
    name: 'Admin',
    data() {
        return {
            ismodule: false, // 调配物资
            isreport: false, // 数据上报
            ismessage: false, // 窗口显示
            ismessage01: false,
            ismessage02: false,
            ismessage03: false,
            ismessage04: false,
            iconimg: true, // 判断窗口显示图标
            linkerImg: [{ // 切换窗口显示图标
                src: require('../images/on.png')
            }, {
                src: require('../images/off.png')
            }],
            levelImg: [{
                src: require('../images/place1.png')
            }, {
                src: require('../images/place2.png')
            }, {
                src: require('../images/place3.png')
            }],
            // 学校防控相关数据
            preventionWorkersAll: 100,
            maskAll: 50,
            disinfectantAll: 30,
            suitAll: 20,
            School: Array, // TODO: 由数据库传入，页面中由v-for循环生成列表
            SchoolA: {
                schoolName:'浙江传媒学院',
                selfLevel: 1,
                aroundLevel: 1,
                isolatedPersonnel: '',//隔离人数
                preventionWorkers: '',//防疫人员
                mask: '',//口罩
                disinfectant: '',//消毒水
                suit: '',//防护服
                log: '敬畏生命，担当责任，抗疫行动，刻不容缓。'
            },
            SchoolB: {
                schoolName:'杭州职业技术学院',
                selfLevel: 1,
                aroundLevel: 1,
                isolatedPersonnel: '',
                preventionWorkers: '',
                mask: '',
                disinfectant: '',
                suit: '',
                log: '将抗疫进行到底。'
            },
            SchoolC: {
                schoolName:'杭州电子科技大学',
                selfLevel: 1,
                aroundLevel: 1,
                isolatedPersonnel: '',
                preventionWorkers: '',
                mask: '',
                disinfectant: '',
                suit: '',
                log: '疫情期间，抗疫第一。'
            },
            SchoolD: {
                schoolName:'浙江理工大学',
                selfLevel: 1,
                aroundLevel: 1,
                isolatedPersonnel: '',
                preventionWorkers: '',
                mask: '',
                disinfectant: '',
                suit: '',
                log: '团结一心，共同抗疫。',
            },
        }
    },
  created() {
    this.selectAllMaterial()
    this.selectSchoolInformation(this.SchoolA)
    this.selectSchoolInformation(this.SchoolB)
    this.selectSchoolInformation(this.SchoolC)
    this.selectSchoolInformation(this.SchoolD)
    this.islevelA();
    this.islevelB();
    this.islevelC();
    this.islevelD();
  },
  mounted() {
        // 时钟
        setInterval(function() {
            function r(el, deg) {
                el.setAttribute('transform', 'rotate(' + deg + ' 500 500)')
            }
            var d = new Date()
            r(this.sec, 6 * d.getSeconds())
            r(this.min, 6 * d.getMinutes())
            r(this.hour, 30 * (d.getHours() % 12) + d.getMinutes() / 2)
        }, 1000)

        const that = this
        setInterval(function (){
          that.selectAllMaterial()
          that.selectSchoolInformation(that.SchoolA)
          that.selectSchoolInformation(that.SchoolB)
          that.selectSchoolInformation(that.SchoolC)
          that.selectSchoolInformation(that.SchoolD)
          that.islevelA();
          that.islevelB();
          that.islevelC();
          that.islevelD();
        },3000)
    },

    methods: {
        // 展开和关闭相关窗口
        domodule() {
            if(this.ismodule == false) {
                this.ismodule = true
                this.isreport = false
            } else if(this.ismodule == true) {
                this.ismodule = false
            }
        },
        doreport() {
            if(this.isreport == false) {
                this.isreport = true
                this.ismodule = false
                this.ismessage = false
                this.iconimg = true
            } else if(this.isreport == true) {
                this.isreport = false
            }
        },
        domessage() {
            if(this.ismessage == true) {
                this.ismessage = false
                this.iconimg = true
            } else if(this.ismessage == false) {
                this.ismessage = true
                this.iconimg = false
                this.isreport = false
            }
        },
        // 判断疫情等级后更新图片
        changeLevelImg(level) {
            if(level == 1) {
                return this.levelImg[0].src;
            } else if(level == 2) {
                return this.levelImg[1].src;
            } else if(level == 3) {
                return this.levelImg[2].src;
            }
        },

        // 判断周边疫情等级后更新class
        changeAroundLevelImg(level) {
            if(level == 1) {
                return 'levelGreen';
            } else if(level == 2) {
                return 'levelYellow';
            } else if(level == 3) {
                return 'levelRed';
            }
        },

        reportIsolatedPersonnel(schoolName){
          let num = prompt('请输入更新后的隔离人数:');
          if(num!='' && num!=undefined){
            SQL.getSql().updateInfected(schoolName,num)
          }
        },

        reportAllMaterial(MaName){
          let num = prompt('请输入防疫资源增加或减少的数量:');
          if(num!='' && num!=undefined){
            SQL.getSql().updateAllMaterial(MaName,num)
          }
        },

        reportMaterial(schoolName,MaName){
          let num = prompt('请输入'+schoolName+'防疫资源增加或减少的数量:');
          if(num!='' && num!=undefined){
            SQL.getSql().updateMaterial(schoolName,MaName,num)
          }
        },

      islevelA() {
            // 根据自身隔离人数判断
            if(this.SchoolA.isolatedPersonnel > 10) { // 变成红码并通知隔壁
                this.SchoolA.selfLevel = 3

                this.SchoolB.aroundLevel = 3
                this.SchoolC.aroundLevel = 3
            } else if(this.SchoolA.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
                this.SchoolA.selfLevel = 2

                if(this.SchoolB.aroundLevel < 2) {
                    this.SchoolB.aroundLevel = 2
                }
                if(this.SchoolC.aroundLevel < 2) {
                    this.SchoolC.aroundLevel = 2
                }
            } else {  // 变成绿码并通知隔壁
                this.SchoolA.selfLevel = 1
            }
        },

        islevelB() {
            // 根据自身隔离人数判断
            if(this.SchoolB.isolatedPersonnel > 10) { // 变成红码并通知隔壁
                this.SchoolB.selfLevel = 3

                this.SchoolA.aroundLevel = 3
                this.SchoolD.aroundLevel = 3
            } else if(this.SchoolB.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
                this.SchoolB.selfLevel = 2

                if(this.SchoolA.aroundLevel < 2) {
                    this.SchoolA.aroundLevel = 2
                }
                if(this.SchoolD.aroundLevel < 2) {
                    this.SchoolD.aroundLevel = 2
                }
            } else {  // 变成绿码并通知隔壁
                this.SchoolB.selfLevel = 1
            }
        },

        islevelC() {
            // 根据自身隔离人数判断
            if(this.SchoolC.isolatedPersonnel > 10) { // 变成红码并通知隔壁
                this.SchoolC.selfLevel = 3

                this.SchoolA.aroundLevel = 3
                this.SchoolD.aroundLevel = 3
            } else if(this.SchoolC.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
                this.SchoolC.selfLevel = 2

                if(this.SchoolA.aroundLevel < 2) {
                    this.SchoolA.aroundLevel = 2
                }
                if(this.SchoolD.aroundLevel < 2) {
                    this.SchoolD.aroundLevel = 2
                }
            } else {  // 变成绿码并通知隔壁
                this.SchoolC.selfLevel = 1
            }
        },

        islevelD() {
            // 根据自身隔离人数判断
            if(this.SchoolD.isolatedPersonnel > 10) { // 变成红码并通知隔壁
                this.SchoolD.selfLevel = 3

                this.SchoolB.aroundLevel = 3
                this.SchoolC.aroundLevel = 3
            } else if(this.SchoolD.isolatedPersonnel > 6) { // 变成黄码并通知隔壁
                this.SchoolD.selfLevel = 2

                if(this.SchoolB.aroundLevel < 2) {
                    this.SchoolB.aroundLevel = 2
                }
                if(this.SchoolC.aroundLevel < 2) {
                    this.SchoolC.aroundLevel = 2
                }
            } else {  // 变成绿码并通知隔壁
                this.SchoolD.selfLevel = 1
            }
        },

        //一次性查询学校所有信息
        async selectSchoolInformation(that){
            that.isolatedPersonnel = await SQL.getSql().selectInfected(that.schoolName);
            that.preventionWorkers = await SQL.getSql().selectMaterial(that.schoolName, '防疫人员');
            that.mask = await SQL.getSql().selectMaterial(that.schoolName, '口罩');
            that.disinfectant = await SQL.getSql().selectMaterial(that.schoolName, '消毒水');
            that.suit = await SQL.getSql().selectMaterial(that.schoolName, '防护服');
        },
        async selectAllMaterial(){
          this.preventionWorkersAll = await SQL.getSql().selectAllMaterial('防疫人员');
          this.maskAll = await SQL.getSql().selectAllMaterial('口罩');
          this.disinfectantAll = await SQL.getSql().selectAllMaterial('消毒水');
          this.suitAll= await SQL.getSql().selectAllMaterial('防护服');
        }
    }
}
</script>

<style scoped>
    button {
        width: 60px;
        height: 26px;
        letter-spacing: 1px;
        background-color: #fffb;
        border-radius: 8px;
    }

    .adminpage {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .top {
        width: 100%;
        height: 80px;
        background-color: #eee;
        box-sizing: border-box;
        border-bottom: 2px solid #2c3e50;
    }

        .topbar {
            min-width: 1280px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .topbar img {
            height: 32px;
        }

        .topbar-l {
            width: auto;
            padding: 10px;
            color: #2c3e50;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            position: relative;
            cursor: pointer;
            transition: 0.5s;
            opacity: 0.8;
        }

        .topbar-l:hover {
            opacity: 1;
        }

        .topbar-l-hover {
            opacity: 1;
        }

        .topbar-l::after {
            content: '';
            width: 80%;
            height: 3px;
            border-radius: 2px;
            background-color: #fffb;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
        }

        .topbar-l:hover::after {
            animation: underline 0.8s forwards ease;
        }

        @keyframes underline {
            from {
                width: 0%;
                background-color: #2c3e50;
            }
            to {
                width: 70%;
                background-color: #030e1a;
            }
        }

    .content {
        width: 100%;
        min-width: 1280px;
        min-height: 820px;
        position: absolute;
        top: 80px;
        bottom: 0;
    }

        /* 时钟组件 */
        .content .clock {
            width: 380px;
            height: 320px;
            border-radius: 0 12px 12px 0;
            background-color: rgba(44, 62, 80, 0.95);
            position: absolute;
            top: 60px;
            left: -30px;
            z-index: 10;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
            transform: skewX(-3deg) translateX(-288px);
            transition: 1s;
        }

        .content .clock:hover {
            transform: skewX(-3deg) translateX(0);
        }

        .content .onclock {
            transform: skewX(-3deg) translateX(0);
        }

        /* 数据上报 */
        .content .report {
            width: 72%;
            height: 700px;
            border: 2px solid #fffd;
            color: #fffd;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 1px;
            position: fixed;
            left: 50%;
            top: 150px;
            margin-left: -38%;
            padding: 40px;
            border-radius: 20px;
            z-index: 12;
            background-color: rgba(44, 62, 80, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
                0 0 120px rgba(105, 159, 221, 0.1) inset;
            opacity: 0;
            visibility: hidden;
            transition: 0.8s;

        }

        .content .onreport {
            opacity: 1;
            visibility: visible;
        }

        /* 人员分配组件 */
        .content .people {
            width: 280px;
            height: 380px;
            padding: 20px 0 20px 100px;
            color: #fffd;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 1px;
            border-radius: 0 12px 12px 0;
            background-color: rgba(44, 62, 80, 0.95);
            position: absolute;
            top: 420px;
            left: -30px;
            z-index: 10;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
            transform: skewX(-3deg) translateX(-308px);
            transition: 1s;
        }

        .content .people:hover {
            transform: skewX(-3deg) translateX(-20px);
        }

        .content .onpeople {
            transform: skewX(-3deg) translateX(-20px);
        }

        .content .people span {
            color: #ee1414ee;
            font-weight: 600;
        }

        /* 物资分配组件 */
        .content .materials {
            width: 280px;
            height: 680px;
            padding: 30px 80px 20px 66px;
            color: #fffd;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 1px;
            border-radius: 12px 0 0 12px;
            background-color: rgba(44, 62, 80, 0.95);
            position: absolute;
            top: 60px;
            right: -30px;
            z-index: 10;
            box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.3);
            transform: skewX(3deg) translateX(350px);
            transition: 1s;
        }

        .content .materials:hover {
            transform: skew(3deg) translateX(0);
        }

        .content .onmaterials {
            transform: skew(3deg) translateX(0);
        }

        .content .materials button {
            float: right;
        }

        .content .materials span {
            color: #ee1414ee;
            font-weight: 600;
        }

    /* 主内容区域 */
    .content .main {
        width: 1280px;
        height: 780px;
        margin: 112px auto 0;
        position: relative;
        z-index: 1;
    }

        /* 学校信息区域 */
        .levelGreen {
            width: 46px;
            height: 26px;
            position: absolute;
            top: 34px;
            background-color: green;
            display: inline-block;
            opacity: 0.75;
        }

        .levelYellow {
            width: 46px;
            height: 26px;
            position: absolute;
            top: 34px;
            background-color: yellow;
            display: inline-block;
            opacity: 0.75;
        }

        .levelRed {
            width: 46px;
            height: 26px;
            position: absolute;
            top: 34px;
            background-color: red;
            display: inline-block;
            opacity: 0.75;
        }

        .content .main .school-01 {
            width: 648px;
            height: 280px;
            position: absolute;
            top: -66px;
            left: -106px;
            backdrop-filter: blur(6px);
            z-index: 5;
            opacity: 0;
            visibility: hidden;
            transition: 0.8s;
        }
        
        .onschool01 {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .content .main .school-02 {
            width: 648px;
            height: 280px;
            position: absolute;
            top: -76px;
            left: 700px;
            backdrop-filter: blur(6px);
            z-index: 5;
            opacity: 0;
            visibility: hidden;
            transition: 0.8s;
        }

        .onschool02 {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .content .main .school-03 {
            width: 648px;
            height: 280px;
            position: absolute;
            top: 472px;
            left: -100px;
            backdrop-filter: blur(6px);
            z-index: 5;
            opacity: 0;
            visibility: hidden;
            transition: 0.8s;
        }

        .onschool03 {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .content .main .school-04 {
            width: 648px;
            height: 280px;
            position: absolute;
            top: 480px;
            left: 726px;
            backdrop-filter: blur(6px);
            z-index: 5;
            opacity: 0;
            visibility: hidden;
            transition: 0.8s;
        }

        .onschool04 {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .content .main .school-01 .school-text,.school-02 .school-text,.school-03 .school-text,.school-04 .school-text {
            width: 648px;
            height: 280px;
            padding: 30px 40px;
            box-sizing: border-box;
            font-size: 22px;
            font-weight: 500;
            letter-spacing: 1px;
            line-height: 32px;
            color: #fff;
            position: absolute;
            z-index: 7;
        }

        .content .main .school-01 .bg-img {
            width: 680px;
            position: absolute;
            top: -20px;
            left: -14px;
            z-index: 6;
        }

        .content .main .school-02 .bg-img {
            width: 680px;
            position: absolute;
            top: -20px;
            left: -14px;
            z-index: 6;
        }

        .content .main .school-03 .bg-img {
            width: 680px;
            position: absolute;
            top: -20px;
            left: -14px;
            z-index: 6;
        }

        .content .main .school-04 .bg-img {
            width: 680px;
            position: absolute;
            top: -20px;
            left: -14px;
            z-index: 6;
        }

        .content .main .palce-img {
            width: 42px;
            z-index: 4;
            opacity: 0;
            animation: place 1s forwards ease;
            animation-delay: 1.8s;
            cursor: pointer;
        }

        @keyframes place {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

    .content .main .icon-img {
        width: 56px;
        height: 56px;
        position: fixed;
        bottom: 30px;
        right: 80px;
        transition: 0.2s;
        opacity: 0.6;
        cursor: pointer;
    }

    .content .main .icon-img:hover {
        opacity: 1;
    }

    .content .main .main-bg {
        width: 1280px;
        height: 780px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        animation: content-img 2s forwards ease;
    }

    @keyframes content-img {
        from {
            width: 1100px;
            height: 600px;
            transform: rotate(-5deg);
        }
        to {
            transform: rotateX(60deg) rotateY(5deg) rotateZ(-15deg);
        }
    }

    /* 时钟样式 */
    svg {
        position: absolute;
        top: 10%;
        width: 100%;
        height: 80%;
        transform: skewX(4deg);
    }

    path {
        stroke: #09151b;
        stroke-linecap: round;
        stroke-width: 42;
        fill: none;
    }

    #sec {
        stroke: #6f7f24;
        stroke-width: 20;
    }

    #min {
        stroke: #3d601b;
        stroke-width: 38;
    }

    #hour {
        stroke: #13441e;
        stroke-width: 38;
    }
</style>